<template>
	<view class="container">
		<!-- 核销码和二维码区域 -->
		<view class="er-section">
			<text class="er-code">核销码: {{ orderDetail.verificationCode }}</text>
			<image 
				class="er-img" 
				:class="{ 'qr-disabled': orderDetail.status === 'completed' || orderDetail.status === 'cancelled' }"
				src="/static/my/erweima.jpg"
			></image>
		</view>

		<!-- 维修信息区域 -->
		<view class="info-section">
			<view class="section-title">维修信息</view>
			<view class="info-item">
				<view class="info-label">维修单号:</view>
				<view class="info-value">{{ orderDetail.orderNumber }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">维修状态:</view>
				<view class="info-value status-value" :class="'status-' + orderDetail.status">
					{{ getStatusText(orderDetail.status) }}
				</view>
			</view>

			<view class="info-item">
				<view class="info-label">车主姓名:</view>
				<view class="info-value">{{ orderDetail.ownerName }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">联系方式:</view>
				<view class="info-value">{{ orderDetail.contact }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">维修方式:</view>
				<view class="info-value">{{ orderDetail.repairMethod }}</view>
			</view>

			<view class="info-item" v-if="orderDetail.repairMethod === '上门取车'">
				<view class="info-label">取车位置:</view>
				<view class="info-value">{{ orderDetail.location }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">提交日期:</view>
				<view class="info-value">{{ orderDetail.submitDate }}</view>
			</view>
			
			<view class="info-item">
				<view class="info-label">预约日期:</view>
				<view class="info-value">{{ orderDetail.appointmentDate }}</view>
			</view>
		</view>

		<!-- 车辆信息区域 -->
		<view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-item">
				<view class="info-label">车辆类型:</view>
				<view class="info-value">{{ orderDetail.vehicleType }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">车牌号:</view>
				<view class="info-value">{{ orderDetail.plateNumber }}</view>
			</view>

			<view class="info-item">
				<view class="info-label">整车照片:</view>
				<image class="car-photo" :src="'/static/my/xiaoqiche.jpg'" mode="widthFix"></image>
			</view>

			<view class="info-item">
				<view class="info-label">维修部位照片:</view>
				<view class="repair-photos">
					<image class="repair-photo" :src="'/static/my/xiaoqiche.jpg'" mode="widthFix"></image>
					<image class="repair-photo" :src="'/static/my/xiaoqiche.jpg'" mode="widthFix"></image>
					<image class="repair-photo" :src="'/static/my/xiaoqiche.jpg'" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 取消订单按钮 -->
		<button 
			class="cancel-btn" 
			v-if="orderDetail.status === 'in_progress'"
			@click="cancelOrder"
		>
			取消订单
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: null,
				orderStatus: null,
				orderDetail: {
					orderNumber: '3535252',
					status: 'in_progress',
					ownerName: '张',
					contact: '1993829282',
					repairMethod: '上门取车',
					location: '山阳区32号',
					submitDate: '2022/11/08 12:34',
					appointmentDate: '2022/11/10 11:00',
					vehicleType: '大客车',
					plateNumber: '豫J45323',
					verificationCode: 'WE343235V'
				}
			}
		},
		onLoad(options) {
			// 获取传递的参数
			this.orderId = options.id;
			this.orderStatus = options.status;
			
			// 根据ID和状态加载订单详情
			this.loadOrderDetail();
		},
		methods: {
			// 加载订单详情
			loadOrderDetail() {
				// 模拟根据ID获取订单详情
				// 这里后期会替换为真实的API调用
				const mockOrders = [
					{
						id: 1,
						orderNumber: '3535252',
						status: 'in_progress',
						ownerName: '张',
						contact: '1993829282',
						repairMethod: '上门取车',
						location: '山阳区32号',
						submitDate: '2022/11/08 12:34',
						appointmentDate: '2022/11/10 11:00',
						vehicleType: '大客车',
						plateNumber: '豫J45323',
						verificationCode: 'WE343235V'
					},
					{
						id: 2,
						orderNumber: '3535253',
						status: 'completed',
						ownerName: '李',
						contact: '13800138000',
						repairMethod: '到店维修',
						location: '洛龙区',
						submitDate: '2022/11/09 10:20',
						appointmentDate: '2022/11/12 14:00',
						vehicleType: '轿车',
						plateNumber: '豫A12345',
						verificationCode: 'WE343236V'
					},
					{
						id: 3,
						orderNumber: '3535254',
						status: 'cancelled',
						ownerName: '王',
						contact: '13900139000',
						repairMethod: '到店维修',
						location: '涧西区',
						submitDate: '2022/11/06 16:45',
						appointmentDate: '2022/11/08 09:00',
						vehicleType: 'SUV',
						plateNumber: '豫B67890',
						verificationCode: 'WE343237V'
					}
				];
				
				const order = mockOrders.find(o => o.id == this.orderId);
				if (order) {
					this.orderDetail = { ...order };
				}
			},
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					'in_progress': '进行中',
					'completed': '已完成',
					'cancelled': '已取消'
				};
				return statusMap[status] || '未知状态';
			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '确认取消',
					content: '确认取消预约么?',
					success: (res) => {
						if (res.confirm) {
							// 调用取消订单接口
							this.processCancelOrder();
						}
					}
				});
			},
			// 处理取消订单
			processCancelOrder() {
				// 显示加载状态
				uni.showLoading({
					title: '处理中...'
				});
				
				// 模拟API调用
				setTimeout(() => {
					uni.hideLoading();
					
					// 更新订单状态
					this.orderDetail.status = 'cancelled';
					
					// 显示成功提示
					uni.showToast({
						title: '订单已取消',
						icon: 'success',
						duration: 2000
					});
					
					// 延迟返回上一页
					setTimeout(() => {
						uni.navigateBack();
					}, 2000);
					
				}, 1500);
			}
		}
	};
</script>

<style>
	.container {
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.er-section {
		text-align: center;
		/* 核销卷区域居中 */
		display: flex;
		align-items: center;
		/* 水平居中 */
		flex-direction: column;
		/* 垂直居中 */
		margin-bottom: 30rpx;
	}

	.er-code {
		font-size: 32rpx;
		margin-bottom: 20rpx;
	}

	.er-img {
		width: 200rpx;
		height: 220rpx;
		transition: all 0.3s ease;
	}

	.er-img.qr-disabled {
		filter: grayscale(100%);
		opacity: 0.6;
	}

	.info-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		border-left: 6rpx solid #007aff;
		padding-left: 10rpx;
	}

	.info-item {
		display: flex;
		margin-bottom: 15rpx;
	}

	.info-label {
		width: 150rpx;
		font-size: 28rpx;
		color: #666;
	}

	.info-value {
		flex: 1;
		font-size: 28rpx;
	}

	.status-value {
		font-weight: bold;
	}

	.status-in_progress {
		color: #ff9500;
	}

	.status-completed {
		color: #34c759;
	}

	.status-cancelled {
		color: #ff3b30;
	}

	.car-photo {
		width: 220rpx;
		margin-top: 10rpx;
	}

	.repair-photos {
		display: flex;
		gap: 10rpx;
		margin-top: 10rpx;
	}

	.repair-photo {
		width: 140rpx;
	}

	.cancel-btn {
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		width: 200rpx;
		height: 80rpx;
		background-color: #ff3b30;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
		box-shadow: 0 4rpx 20rpx rgba(255, 59, 48, 0.3);
	}
</style>